<script lang="ts" setup>
import { readerModel } from '@/api/reader/reader';
import { ref } from 'vue';

const pagination = {
  pageNum: 1,
  pageSize: 10,
  total: 0
};

const options = ref([]);

async function search(query = {}) {
  const { pageNum, pageSize } = pagination;
  const params = {
    pageNum,
    pageSize,
    ...query
  };
  const { data: { data: { list, total } } } = await readerModel.records(params);
  const readerList = list.map((item) => {
    return {
      label: `${item.readerName} / ${item.identifier}`,
      value: item.id
    };
  });

  options.value.push.apply(options.value, readerList);
  pagination.total = total;
  pagination.pageNum += 1;
}

search();

const onScroll = (e) => {
  const { scrollHeight, scrollTop, clientHeight } = e.target;
  console.log(options.value.length, pagination.total);
  if(scrollTop + clientHeight + 10 > scrollHeight && options.value.length < pagination.total) {
    search();
  }
};

function filterSearch(query) {
  pagination.pageNum = 1;
  pagination.total = 0;
  options.value = [];
  search({ readerName: query });
}
</script>
<template>
  <NSelect
    :options="options"
    :onScroll="onScroll"
    filterable
    @search="filterSearch"
  />
</template>
